<template>
  <form id="form1">
    <div id="container">
      <div class="content">
        <div class="tit">
          <a>首页</a>&gt;
          <a>关于协会</a>&gt;
          <a>协会简介</a>
        </div>
        <div class="news">
          <div class="about_r">
            <div class="submenu_m">
              <a v-for="item in list" @click="detail(item)"
                :class="item.name == name  ? 'current' : ''">{{item.name}}</a>
            </div>
            <div class="newsinfo" >
              <div id="newsinfo123" :style="personShow ? 'display:none':''" >

              </div>
              <div class="fenzhi" v-if="personShow">
                <div id="person" class="person">
                  <div class="type" v-for="item in typeList">
                    <div class="typeTitle">{{item.name}}</div>
                    <a v-for="person in item.personList"
                      :href="'/newsview?type=2&id='+person.id">
                      <dl>
                        <dt>
                          <img :src="person.img">
                        </dt>
                        <dd>{{person.name}}</dd>
                        <dd class="personUnit">{{person.title}}</dd>
                      </dl>
                    </a>
                  </div>
                </div>
                <div id="unitNewsList">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</template>

<script>
import Data from '@/api/data'

export default {
  name: 'Index',
  props:{
    layout: String
  },
  data() {
    return {
      dictType: "ABOUT_INFO",

      list:[],
      name: "协会简介",

      typeList: "",
      personShow: false,
    }
  },
  watch: {
    month: {

    }

  },
  computed: {

  },
  created() {
    this.name = this.$route.query.name
    this.aboutList();
    this.personPre()
  },
  methods: {
    personPre() {
      //请求负责人
      var data = {type: "PERSON_TYPE", parent: "1"};
      Data.get("/dictionary", data).then(async res=>{
        var list = res.list
        if(res.list && res.list.length > 0) {
          //循环
          for(var i = 0;i<list.length;i++) {
            var personList = await this.personLoad(list[i]);
            list[i]["personList"] = personList
          }
        }
        this.$set(this, "typeList", list)
      })

    },
    aboutList() {
      var data = {size:20,type: this.dictType};
      Data.get("/dictionary", data).then(res=>{
        var list = []
        if(res.list && res.list.length > 0) {
          list = res.list
        }
        list.push({name: "协会负责人",code:"1",aboutPerson: true})
        for(var i = 0; i < list.length; i++) {
          if(list[i].name == this.name) {
            this.detail(list[i])
          }
        }
        this.list = list
      })
    },
    detail(item) {
      this.name = item.name
      if(!item.aboutPerson) {
        this.personShow = false
        var node = document.getElementById("newsinfo123");
        node.innerHTML = item.value
        return;
      }
      this.personShow = true
    },
    async personLoad(item) {
      var list = item.value.split(";");
      var ids = []
      for(var i = 0; i < list.length; i++ ) {
        var id = list[i].split(":")[0]
        if(id) {
          ids.push(id)
        }
      }
      if(ids.length > 0) {
        var res = await Data.get("/person/listByIds", {ids: ids.join(",")});
        return res;
      }
      return ""
    },

  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/new_files_m/bootstrap.min.css";
@import "~@/styles/new_files_m/iconfont.css";
@import "~@/styles/new_files_m/comm.css";
@import "~@/styles/new_files_m/info.css";
</style>
